<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      class Clock {
        constructor({ template }) {
          this.template = template;
        }
        render() {
          let date = new Date();
          let hours = date.getHours();
          if (hours < 10) hours = '0' + hours;

          let mins = date.getMinutes();
          if (mins < 10) mins = '0' + mins;

          let secs = date.getSeconds();
          if (secs < 10) secs = '0' + secs;

          let output = this.template
            .replace('h', hours)
            .replace('m', mins)
            .replace('s', secs);

          console.log(output);
        }

        stop() {
          clearInterval(this.timer);
        }

        start() {
          this.render();
          this.timer = setInterval(() => this.render(), 1000);
        }
      }

      // class ExtendedClock extends Clock {}

      const c = new Clock({ template: 'h:m:s' });
      c.render();
      // c.start();
      // c.stop();
    </script>
  </body>
</html>
